<template>
  <div class="app">
    <img :src="detail.pic" alt="" />
    <h1>{{ detail.title }}</h1>
    <h2 style="color: #b0b0b0; line-height: 50px">{{ detail.slogo }}</h2>
    <p>评分:{{ detail.rating }}</p>
    <p>{{ detail.labels.join("|") }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: [],
    };
  },
  mounted() {
    var { id } = this.$route.params;
    this.$http(`http://47.108.197.28:4000/api/movieDetail?id=${id}`).then(
      (res) => {
        console.log(res.data.res[0]);
        this.detail = res.data.res[0];
      }
    );
  },
};
</script>

<style scoped>
.app {
  width: 10rem;
  overflow: hidden;
  margin: auto;
}
</style>